<template>
    <view class="tf-Box-Bg">
        <view class="tf-Box">
            <view class="tf-Box-title">
                请完成安全验证
                <u-icon name="close" size="36rpx" @click="close_"></u-icon>
            </view>
            <view class="pic-box">
                <image class="full-pic" :src="verifyImg" />
                <image class="square-pic" :src="squareImg" :style="{ left: picX + 'px' }" />
            </view>
            <movable-area class="tf-Box-BtnBox">
                <view class="tf-Box-BtnBox-text">滑动滑块完成拼图</view>
                <movable-view class="tf-Box-BtnNei" :inertia="false" direction="horizontal" :x="x" @change="changePath" @mouseup="endTouch" @touchend="endTouch">
                    <wd-icon size="42rpx" name="arrow-right" color="#fff"></wd-icon>
                </movable-view>
            </movable-area>
        </view>
    </view>
</template>

<script setup lang="ts">
import AES from 'crypto-js/aes';
import ENC from 'crypto-js/enc-utf8';
import ECB from 'crypto-js/mode-ecb';
import { ref, onMounted, nextTick, defineEmits } from 'vue';
import { $util } from '@/util/common';
import $apiLogin from '@/api/login';

const emits = defineEmits(['close', 'success']);
const key = ref(0);
const verifyImg = ref();
const squareImg = ref();
//加密密钥
const secretKey = ref();
//实时移动X
const x = ref(0);
const picX = ref(0);

const props = defineProps({
    verifyCodeType: {
        type: Number,
        default: -1,
    },
});
onMounted(() => {
    nextTick(() => {
        init();
    });
});

function aesEncrypt(word: string, keyWord: string) {
    const encrypted = AES.encrypt(ENC.parse(word), ENC.parse(keyWord), { mode: ECB });
    return encrypted.toString();
}
function close_() {
    emits('close');
}
function init() {
    key.value = $util.random(100000000000, 999999999999);
    $apiLogin
        .getSlideVerify({
            key: key.value,
            verifyCodeType: props.verifyCodeType,
        })
        .then(({ data }) => {
            verifyImg.value = 'data:image/(jpg|jpeg|png);base64,' + data.originalImageBase64;
            squareImg.value = 'data:image/(jpg|jpeg|png);base64,' + data.jigsawImageBase64;
            secretKey.value = data.secretKey;

            nextTick(() => {
                x.value = 0;
            });
            return;
        });
}
function endTouch() {
    x.value = picX.value;
    //转化为实际的像素
    let pointJson = JSON.stringify({
        x: (x.value * 500) / uni.upx2px(1000),
        y: 5.0,
    });
    if (secretKey.value) {
        pointJson = aesEncrypt(pointJson, secretKey.value);
    }
    $apiLogin
        .checkSlideVerify({
            key: key.value,
            pointJson: pointJson,
            secretKey: secretKey.value,
            verifyCodeType: props.verifyCodeType,
        })
        .then(({ data }) => {
            emits('success', {
                securityCode: data.securityCode,
                randomKey: key.value,
            });
        })
        .catch((e) => {
            init();
        });
}
function changePath(e: any) {
    picX.value = e.detail.x;
    return e;
}
</script>

<style lang="scss" scoped>
.pic-box {
    margin: 20rpx;
    width: 620rpx;
    height: 310rpx;
    position: relative;
}

.square-pic {
    position: absolute;
    top: 0;
    width: 94rpx;
    height: 310rpx;
}

.full-pic {
    width: 620rpx;
    height: 310rpx;
}

.tf-Box-Bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;

    .tf-Box {
        width: 660upx;
        height: 584upx;
        background-color: #fff;
        border-radius: 6upx;
        box-shadow: 0 0 50upx 0upx rgba(0, 0, 0, 0.2);

        .tf-Box-title {
            height: 100upx;
            line-height: 1;
            padding: 0 32upx;
            font-size: 32upx;
            border-bottom: 1px solid #e1e3e9;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .tf-Box-center {
            margin: 30upx auto;
            border-radius: 6upx;
        }

        .tf-Box-BtnBox {
            margin: 30upx auto;
            width: 620upx;
            height: 75upx;
            line-height: 75upx;
            text-align: center;
            font-size: 28upx;
            border-radius: 6upx;
            border: 1px solid #e1e3e9;
            background-color: #f7f8f9;
            overflow: hidden;
            position: relative;

            .tf-Box-BtnBox-text {
                width: 100%;
                height: 75upx;
                position: absolute;
                top: 0;
                left: 0;
                color: #424649;
                text-align: center;
            }

            .tf-Box-BtnNei {
                height: 75upx;
                width: 75upx;
                background-color: $-color-theme;
                box-shadow: 0 0 10upx 0upx rgba(0, 0, 0, 0.2);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>
